import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { store } from '@/store'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { onMounted } from 'vue'

// 定义路由配置
const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/LoginView.vue'),
    meta: { 
      requiresAuth: false,
      title: '登录'  // 直接在这里定义标题
    }
  },
  {
    path: '/',
    component: () => import('@/layouts/DefaultLayout.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('@/views/HomeView.vue'),
        meta: { title: '首页' }
      },
      {
        path: 'users',
        name: 'users',
        component: () => import('@/views/UserManageView.vue'),
        meta: { title: '用户管理' }
      },
      {
        path: 'roles',
        name: 'roles',
        component: () => import('@/views/RoleManageView.vue'),
        meta: { title: '角色管理' }
      },
      {
        path: 'equipment',
        name: 'equipment',
        component: () => import('@/views/EquipmentManageView.vue'),
        meta: { title: '设备管理' }
      },
      {
        path: 'maintenance',
        name: 'maintenance',
        component: () => import('@/views/MaintenanceManageView.vue'),
        meta: { title: '维修管理' }
      },
      {
        path: 'rental',
        name: 'rental',
        component: () => import('@/views/RentalManageView.vue'),
        meta: { title: '租赁管理' }
      },
      {
        path: 'inspection',
        name: 'inspection',
        component: () => import('@/views/InspectionManageView.vue'),
        meta: { title: '巡检管理' }
      },
      {
        path: '/device/category',
        name: 'device-category',
        component: () => import('@/views/device/CategoryList.vue'),
        meta: {
          title: '设备分类管理',
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('@/views/RegisterView.vue'),
    meta: {
      requiresAuth: false,
      title: '注册'
    }
  },
  {
    path: '/logout',
    name: 'logout',
    component: {
      setup() {
        const router = useRouter()
        const store = useStore()
        
        // 组件创建时执行退出登录
        onMounted(() => {
          store.commit('CLEAR_USER_STATE')
          router.push('/login')
        })
        
        return () => null
      }
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuthenticated
  console.log('路由守卫 - 认证状态:', isAuthenticated)
  console.log('路由守卫 - Store状态:', store.state)
  
  // 设置页面标题
  document.title = `${to.meta.title || '工厂设备管理系统'}`
  
  if (to.meta.requiresAuth && !isAuthenticated) {
    console.log('需要认证，重定向到登录页')
    next({ name: 'login' })
  } else if (to.name === 'login' && isAuthenticated && from.name !== 'logout') {
    // 只有在不是从退出登录操作来的情况下才重定向到首页
    console.log('已登录，重定向到首页')
    next({ path: '/' })
  } else {
    console.log('正常导航到:', to.path)
    next()
  }
})

export default router 